<template>
  <el-dialog :before-close="cancelBatch" :close-on-click-modal="false" :close-on-press-escape="false"
             :visible.sync="batchVisible" append-to-body title="批量导出预览" @open="beforOpenBatch"
  >
    <div id="excel_preview" class="excelPreview">
      <div v-for="(item,index) in taskList" :key="index">
        <h2>{{ item.topicName }}</h2>
        <span class="taskTitle">血液颜色</span>
        <el-form ref="topicForm" label-width="auto" size="mini" style="margin-top: 10px;margin-left: 10px">
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="课题编号" prop="topicCode">
                <div>{{ item.topicCode }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课题名称" prop="topicName">
                <div>{{ item.topicName }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="课题来源" prop="topicSource">
                <div>{{ item.topicSource }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="研究目的" prop="researchPurposes">
                <div>{{ item.researchPurposes }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="研究方法" prop="researchMethod">
                <div>{{ item.researchMethod }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预期结果" prop="expectedResult">
                <div>{{ item.expectedResult }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <div>{{ item.startTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <div>{{ item.endTime }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="item.showList.length > 0" style="margin-top: 20px">
          <span class="taskTitle">临床报告CRF表</span>
          <el-form size="mini" style="margin-top: 10px;margin-left: 10px">
            <el-col v-for="(items,index) in item.showList" :key="index" :span="12">
              <el-form-item :label="items.label">
                <div>{{ items.value }}</div>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelBatch">取 消</el-button>
      <el-button type="primary" @click="handlePreview">下 载</el-button>
    </div>
  </el-dialog>
</template>
<script>
import print from '@/utils/print'

export default {
  data() {
    return {
      taskList: []
    }
  },
  props: {
    batchVisible: Boolean,
    batchExportData: Array
  },
  methods: {
    /**
     * @description: 打印
     * @return {*}
     */
    handlePreview() {
      print.downloadPDF(document.querySelector('#excel_preview'), '课题任务PDF')
    },
    /**
     * @description: 打开之前数据处理
     * @return {*}
     */
    beforOpenBatch() {
      this.taskList = []
      this.customFormJsonFirst()
    },

    /**
     * @description: 数据处理层级和赋值
     * @return {*}
     */
    customFormJsonFirst() {
      let newCustomForm = _.cloneDeep(this.batchExportData)
      newCustomForm.forEach(item => {
        if (_.isEmpty(item.formMap) || !item.formData) {

        } else {
          let arr = JSON.parse(item.formMap[item.formKey])
          let brr = JSON.parse(item.formData)
          let newCustomForms = []
          if (item.formData != undefined) {
            arr.fields.forEach(items => {
              //第一层处理
              if (items.__vModel__) {
                const val = brr[items.__vModel__]
                if (val) {
                  items.__config__.defaultValue = val
                }
                newCustomForms.push(items)
              }
              //第二层处理
              else {
                if (items.__config__ && items.__config__.children && items.__config__.children.length > 0) {
                  items.__config__.children.forEach(child => {
                    const childVal = brr[child.__vModel__]
                    if (childVal) {
                      child.__config__.defaultValue = childVal
                    }
                    newCustomForms.push(child)
                  })
                }
              }
            })
          }
          item.newCustomForms = newCustomForms
        }
      })
      this.customFormJsonSecond(newCustomForm)
    },

    /**
     * @description: Pdf展示数据处理
     * @return {*}
     */
    customFormJsonSecond(newList) {
      let newCustomForms = _.cloneDeep(newList)
      newCustomForms.forEach((item, index) => {
        if (item.newCustomForms) {
          let arr = item.newCustomForms
          let newCustomForm = []
          arr.forEach(items => {
            //后端给的数据有些没有defalutValue,需要坐一层判断
            if (items.__config__.defaultValue) {
              //input框,单日期处理,滑块
              if (items.__config__.tag == 'el-input' || items.__config__.tag == 'el-input-number'
                || items.__config__.tagIcon == 'date' || items.__config__.tagIcon == 'time'
                || items.__config__.tag == 'el-slider' || items.__config__.tag == 'el-rate') {
                newCustomForm.push({
                  label: items.__config__.label,
                  value: items.__config__.defaultValue ? items.__config__.defaultValue : '',//处理没有值的情况
                  key: items.__vModel__
                })
              }
              //select处理 el-switch
              else if (items.__config__.tag == 'el-select' || items.__config__.tag == 'el-radio-group') {
                let selectList = item.__slot__.options
                //判断是单选还是多选
                if (selectList.length > 0 && !Array.isArray(items.__config__.defaultValue)) {
                  selectList.forEach(child => {
                    if (child.value == items.__config__.defaultValue) {
                      newCustomForm.push({
                        label: items.__config__.label,
                        value: child.label,
                        key: items.__vModel__
                      })
                    }
                  })
                } else if (selectList.length > 0 && Array.isArray(items.__config__.defaultValue)) {
                  let endList = items.__slot__.options
                  if (items.__config__.defaultValue.length > 0) {
                    let selete = ''
                    endList.forEach(record => {
                      if (items.__config__.defaultValue.includes(record.value)) {
                        selete += record.label + ' '
                      }
                    })
                    newCustomForm.push({
                      label: items.__config__.label,
                      value: selete,
                      key: items.__vModel_
                    })
                  }
                } else {
                }
              }
              //多选处理
              else if (items.__config__.tag == 'el-checkbox-group') {
                let arr = items.__slot__.options
                let brr = ''
                arr.forEach(itemss => {
                  if (items.__config__.defaultValue.includes(itemss.value)) {
                    brr += itemss.label + ' '
                  }
                })
                newCustomForm.push({
                  label: items.__config__.label,
                  value: brr,
                  key: items.__vModel__
                })
              }
              //rangePick时间选择
              else if (items.__config__.tagIcon == 'time-range' || items.__config__.tagIcon == 'date-range') {
                if (items.__config__.defaultValue.length > 0) {
                  newCustomForm.push({
                    label: items.__config__.label,
                    value: items.__config__.defaultValue[0] + '~' + items.__config__.defaultValue[1],
                    key: items.__vModel__
                  })
                }
              }
              //el-switch
              else if (items.__config__.tag == 'el-switch') {
                if (items.__config__.defaultValue) {
                  newCustomForm.push({
                    label: items.__config__.label,
                    value: items['active-value'],
                    key: items.__vModel__
                  })
                } else {
                  newCustomForm.push({
                    label: items.__config__.label,
                    value: items['inactive-value'],
                    key: items.__vModel__
                  })
                }
              } else {
              }
            } else {
              newCustomForm.push({
                label: items.__config__.label,
                value: '',
                key: item.__vModel__
              })
            }
          })
          item.showList = newCustomForm
        } else {
          item.showList = []
        }
      })
      this.taskList = newCustomForms
      console.log(this.taskList)
    },

    /**
     * @description: 关闭
     * @return {*}
     */
    cancelBatch() {
      this.$emit('update:batchVisible', false)
    }
  }
}
</script>

<style less="scss" scoped>
.excelPreview {
  margin-bottom: 40px;
  min-height: 600px;
}

.taskTitle {
  color: #303133;
  font-size: 14px;
  font-weight: 500
}
</style>
